import React,{useState,useEffect} from 'react'
import style from './comment.module.css'
import { getCommentList } from '../../../components/api'
import { useSelector } from 'react-redux'
const { content,comList } = style
interface IComment {
  username: string,
  content: string,
  id:number
  
}
export default function Mycomment() {
  const {username} =  useSelector(state => (state as any).user)
  const [comment,setComment] = useState<IComment[]>([])
  const back = () => {
    window.history.go(-1)
  }
  const getComment = async () => {
    let res = await getCommentList()
    setComment(res.data)
  }
  useEffect(() => {
    getComment()
  },[comment])
  return (
    <div className={content}>
      <h1>
        <span onClick={() => back()}>&lt;</span>
        <span>我的评论</span>
      </h1>
      <ul className={comList}>
        {
          comment.map((item) => 
            <li key={item.id} >
              <p>{username}</p>
              <b>{item.content}</b>
              
          </li>
          )
         
        }
        <i>The End</i>
      </ul>
    </div>
  )
}
